<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>zepto.touchslide测试</title>
    <link rel="stylesheet" href="http://www.cssw3c.com/cdn/css/common.css"/>
    <style>
        /*
        swip-container
        swip-wrapper
        swip-slide  swip-slide-active  swip-slide-next  swip-slide-prev
        swip-pagination
        swip-notification
        swip-button-prev
        swip-button-next
        */

        .swip-container {
            height: 74.67vw;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .swip-wrapper {
            position: relative;
            z-index: 1;/*防止卡顿，一般translate3d一起使用*/
        }

        .swip-slide {
            position: relative;
            flex-shrink: 0;
            /*height: 100vw;!*一般会设置高度，控制显示一致*!*/
            transform:translate3d(0,0,0);/*防止滑动图片闪烁*/
            overflow: hidden;
            z-index: 1;/*防止卡顿*/
        }

        .swip-slide img {
            width: 100vw;
            /*width: 100%;*/
        }

        .swip-pagination {
            position: absolute;
            text-align: center;
            line-height: 10px;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            z-index: 10;
        }

        .swip-pagination li {
            display: inline-block;
            margin: 0 5px 0 0;
            text-indent: -999em;
            width: 10px;
            height: 10px;
            background-color: #999;
            border-radius: 5px;
        }

        .swip-pagination li.act {
            background-color: #333;
        }

        /*样式一需要设置宽度*/
        /*.slide-wrap {*/
             /*position: relative;*/
             /*margin: 0 auto;*/
             /*!*height: 200px;*!*/
             /*!*如果这里设置了高度，就需要设置overflow:hidden，否则会显示全部高度*!*/
             /*overflow: hidden;*/
         /*}*/

        /*.slide {*/
            /*width: 300%;*/
            /*!**/
            /*如果其父元素设置了高度小于图片高度，这里不设置overflow:hidden的话，会出现滑动失效情况*/
            /*所以这里最好设置overflow: hidden;*/
            /**!*/
            /*overflow: hidden;*/
        /*}*/

        /*.slide li {*/
            /*float: left;*/
            /*width: 33.33%;*/
        /*}*/

        /*.slide li img {*/
            /*width: 100%;*/
        /*}*/

        /*.navcontrol {*/
            /*position: absolute;*/
            /*text-align: center;*/
            /*line-height: 10px;*/
            /*left: 50%;*/
            /*bottom: 10px;*/
            /*transform: translateX(-50%);*/
        /*}*/

        /*.navcontrol li {*/
            /*display: inline-block;*/
            /*margin: 0 5px 0 0;*/
            /*text-indent: -999em;*/
            /*width: 10px;*/
            /*height: 10px;*/
            /*background-color: #999;*/
            /*border-radius: 5px;*/
        /*}*/

        /*.navcontrol li.act {*/
            /*background-color: #333;*/
        /*}*/

        /*样式二需要设置宽度*/
        /*.slide-wrap {*/
            /*position: relative;*/
            /*margin: 0 auto;*/
            /*!*height: 200px;*!*/
            /*!*如果这里设置了高度，就需要设置overflow:hidden，否则会显示全部高度*!*/
            /*overflow: hidden;*/
        /*}*/

        /*.slide {*/
            /*display: -webkit-box;*/
            /*display: -webkit-flex;*/
            /*display: flex;*/
            /*width: 100%;*/
        /*}*/

        /*.slide li {*/
            /*-webkit-flex-shrink: 0;*/
            /*-ms-flex: 0 0 auto;*/
            /*-ms-flex-negative: 0;*/
            /*box-sizing: content-box;*/
            /*flex-shrink: 0;*/
            /*width: 100%;*/
            /*height: 100%;*/
            /*position: relative;*/
        /*}*/

        /*.slide li img {*/
        /*width: 100%;*/
        /*}*/

        /*.navcontrol {*/
            /*position: absolute;*/
            /*text-align: center;*/
            /*line-height: 10px;*/
            /*left: 50%;*/
            /*bottom: 10px;*/
            /*transform: translateX(-50%);*/
        /*}*/

        /*.navcontrol li {*/
            /*display: inline-block;*/
            /*margin: 0 5px 0 0;*/
            /*text-indent: -999em;*/
            /*width: 10px;*/
            /*height: 10px;*/
            /*background-color: #999;*/
            /*border-radius: 5px;*/
        /*}*/

        /*.navcontrol li.act {*/
            /*background-color: #333;*/
        /*}*/
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://www.cssw3c.com/cdn/js/jquery.layer.js"></script>
    <script src="http://www.cssw3c.com/cdn/js/jquery.layer.model.js"></script>
    <script src="jquery.touchslide.js"></script>
</head>
<body>
<div class="wrapper">
    <div class="swip-container">
        <ul class="swip-wrapper slide clearfix flex-box photo-browser">
            <li class='swip-slide spg' data-url="images/1.jpg"><img src="http://www.cssw3c.com/cdn/images/1.jpg" alt="1"/></li>
            <li class='swip-slide spg' data-url="images/2.jpg"><img src="http://www.cssw3c.com/cdn/images/2.jpg" alt="1"/></li>
            <li class='swip-slide spg' data-url="images/3.jpg"><img src="http://www.cssw3c.com/cdn/images/3.jpg" alt="1"/></li>
            <li class='swip-slide spg' data-url="images/4.jpg"><img src="http://www.cssw3c.com/cdn/images/4.jpg" alt="1"/></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var slide = $('.slide').slide({
        api:true,
        effect:'left',
        // defaultIndex:2,
        isPagination:true,
        autoPlay:true,
        slideStart:function () {
            //console.log(this);
        }
    });
</script>
</body>
</html>
